<!--离职人员管理-->
<template>
  <div class="addInformation">
    <div class="opNoticeTop">
      <div>{{titleVal}}</div>
    </div>
    <div class="opNoticeMain">
      <div class="searchLogList">
        <div class="searchLogListLi">
          <div class="searchLogListLiLeft">
            选择时间：
          </div>
          <div class="searchLogListLiRightTime">
            <div>
              <el-date-picker v-model="advStartTime" @change="advStartTimeChange" type="date" placeholder="选择时间" :editable='false' clearable></el-date-picker>
            </div>
          </div>
        </div>
        <div class="searchLogListLi">
          <div class="searchLogListLiLeft">
            人员或部门:
          </div>
          <div class="searchLogListLiRightPeo" @click="setReceiverClick">
            {{userInfoVal}}
          </div>
        </div>
        <div class="searchLogListLi">
          <div class="searchLogListLiLeft">
            选择职级：
          </div>
          <div class="searchLogListLiRightSelect">
            <select v-model="submitTypeVal" @change="submitTypeValChange">
              <option v-for="(type,index) in submitTypes" v-bind:value="index" :key="index">{{type.name}}</option>
            </select>
          </div>
        </div>
      </div>
      <div class="listLoglistMainOPent">
        <el-button type="primary" size="medium" @click="searchFindClick">查询</el-button>
      </div>
      <div class="listLoglistMain">
        <ul>
          <li class="firstLi">
            <div>
              姓名
            </div>
            <div>
              职位
            </div>
            <div>
              手机号
            </div>
            <div>
              部门
            </div>
            <div>
              完整部门
            </div>
            <div>
              离职时间
            </div>
            <div>
              离职原因
            </div>
          </li>
          <li class="dataLi" v-for="(item,index) in dataList" :key="index">
            <div>{{item.user.name}}</div>
            <div>{{item.submitTime | timeFun}}</div>
            <div>{{item.templateName}}</div>
            <div>{{item.templateName}}</div>
            <div>{{item.templateName}}</div>
            <div>{{item.templateName}}</div>
            <div>{{item.templateName}}</div>
          </li>
        </ul>
      </div>
      <div class="lastLi" v-show="dataList.length > 0">
        <div>
        </div>
        <div>
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 20, 30, 40]" :page-size="pageSizeNum"
            :current-page="currentPage" layout="total, prev, pager, next" :total="totalNum">
          </el-pagination>
          <!-- <el-pagination @current-change="handleCurrentChange" small layout="prev, pager, next" :total="totalNum">
          </el-pagination> -->
        </div>
      </div>
    </div>
    <!-- 删除分组 -->
    <v-del :deleteBoxShow="deleteBoxShow" :delTostVal="delTostVal" @canfirm="affirmdeleteBoxClick" @cancel="canceldeleteBoxClick"></v-del>
    <!-- 选择人员或者部门弹出框 -->
    <v-addPelete :isupdatePop="updatePopShow" @affirm="affirmUserListsClick" @cancel="cancelUserListsClick" :userselectpop="userselectpopLists"></v-addPelete>
  </div>
</template>
<script>
  import { mapActions } from "vuex";
  import del from "../../cModel/del.vue";
  import addPelete from "../../cModel/addDeptiUsers.vue";
  export default {
    components: {
      "v-del": del,
      "v-addPelete": addPelete
    },
    data() {
      return {
        updatePopShow: false, // 人员选择列表
        userselectpopListsArr: {},
        userselectpopLists: {}, // 已选中的人员-编辑时使用
        memberIdVals: [], // 成员id
        deptsIdVals: [], // 部门id
        deptListsArr: [],
        userListsArr: [],
        userInfoVal: "选择人或者部门", // 选中人和部门

        delTostVal: "", // 删除规范提示
        deleteBoxShow: false, // 删除分组
        advStartTime: "", // 开始时间
        advStartTimeNum: 0,
        advEndTime: "", // 结束时间
        advEndTimeNum: 0,
        pageSizeNum: 10,
        currentPage: 1,
        totalNum: 100,
        selectAllShow: false, // 全选展示
        dataList: [], // 离职人员数据
        submitTypeVal: 0, // 选择日周月
        deptIdsvallists: [],
        userIdsvallists: [],
        submitTypes: [
          { name: "全部" },
          { name: "一级" },
          { name: "二级" },
          { name: "三级" }
        ],
        titleVal: "离职人员列表"
      };
    },
    filters: {},
    created: function () {
      var accessToken = sessionStorage.getItem("accessToken");
      if (accessToken) {
        this.listsFun();
      } else {
        this.$router.push({
          path: "/login"
        });
      }
    },
    mounted() { },
    methods: {
      // 选择成员
      setReceiverClick() {
        var self = this;
        this.$store.commit("setMutviewShow", true);
        this.updatePopShow = true;
        if (self.userselectpopListsArr) {
          self.userselectpopLists = self.userselectpopListsArr;
          this.$store.commit(
            "MutVuexuserselectpopCopyArr",
            self.userselectpopListsArr
          );
        }
      },
      // 选择人员确认
      affirmUserListsClick(val) {
        var self = this;
        this.$store.commit("setMutviewShow", false);
        self.deptListsArr = [];
        self.userListsArr = [];
        if (val) {
          if (val.userLists.length > 0 || val.deptLists.length > 0) {
            var userStr = "";
            if (val.userLists.length > 0) {
              val.userLists.forEach(function (ele, ind) {
                self.userListsArr.push(ele.memberId);
              });
              self.memberIdVals = self.userListsArr; // 成员id
              userStr =
                val.userLists[0].name + "等" + val.userLists.length + "个人员。";
            }
            var deptStr = "";
            if (val.deptLists.length > 0) {
              val.deptLists.forEach(function (ele, ind) {
                self.deptListsArr.push(ele.id);
              });
              self.deptsIdVals = self.deptListsArr; // 部门id
              deptStr =
                val.deptLists[0].name + "等" + val.deptLists.length + "个部门。";
            }
            self.userselectpopListsArr = {};
            self.userselectpopListsArr = val;
            self.userInfoVal = "你选择了" + deptStr + userStr;
          } else {
            self.userselectpopListsArr = {};
            self.memberIdVals = [];
            self.deptsIdVals = [];
            self.userInfoVal = "请选择部门或者成员";
          }
        } else {
          self.userselectpopListsArr = {};
          self.memberIdVals = [];
          self.deptsIdVals = [];
          self.userInfoVal = "请选择部门或者成员";
        }
        this.updatePopShow = false;
      },
      // 选择人员取消
      cancelUserListsClick(val) {
        var self = this;
        this.$store.commit("setMutviewShow", false);
        this.updatePopShow = false;
        if (val.userLists.length > 0 || val.deptLists.length > 0) {
          this.userselectpopListsArr = {};
          this.userselectpopListsArr = val;
        }
      },
      dataFun(val) {
        var standardTime = new Date(val * 1);
        var y, m, d, h, f;
        y = standardTime.getFullYear();
        m = standardTime.getMonth() + 1;
        m = m > 9 ? m : "0" + m;
        d = standardTime.getDate();
        d = d > 9 ? d : "0" + d;
        h = standardTime.getHours();
        h = h > 9 ? h : "0" + h;
        f = standardTime.getMinutes();
        f = f > 9 ? f : "0" + f;
        return y + "-" + m + "-" + d;
      },
      // 离职人员类型选择
      submitTypeValChange() {
        console.log(this.submitTypeVal);
      },
      // 开始时间
      advStartTimeChange() {
        var self = this;
        this.advStartTimeNum = Date.parse(this.advStartTime);
        if (this.advEndTimeNum && this.advStartTimeNum) {
          if (this.advEndTimeNum < this.advStartTimeNum) {
            self.$message({
              type: "info",
              message: "结束时间不能小于开始时间！"
            });
            this.advStartTime = "";
            this.advStartTimeNum = 0;
          } else {
          }
        }
      },
      //结束时间
      advEndTimeChange() {
        var self = this;
        this.advEndTimeNum = Date.parse(this.advEndTime);
        if (this.advEndTimeNum && this.advStartTimeNum) {
          if (this.advEndTimeNum < this.advStartTimeNum) {
            self.$message({
              type: "info",
              message: "结束时间不能小于开始时间！"
            });
            this.advEndTime = "";
            this.advEndTimeNum = "";
          } else {
          }
        }
      },
      // 查询
      searchFindClick() {
        var self = this;
        self.dataList = [];
        self.selectAllShow = false;
        var lisObj = {
          // deptIds: self.deptsIdVals,
          // userIds: self.memberIdVals,
          memberId: sessionStorage.getItem("memberId"),
          orgId: sessionStorage.getItem("ORGID"),
          // submitType: self.submitTypeVal,
          pageNo: self.currentPage,
          pageSize: self.pageSizeNum
        };

        if (self.advStartTime) {
          var advStartT = self.dataFun(self.advStartTime);
          lisObj["startDate"] = advStartT;
        }
        if (self.advEndTime) {
          var advEndT = self.dataFun(self.advEndTime);
          lisObj["endDate"] = advEndT;
        }
        if (self.deptListsArr.length > 0) {
          lisObj["deptIds"] = self.deptListsArr;
        }
        if (self.userListsArr.length > 0) {
          lisObj["userIds"] = self.userListsArr;
        }
        lisObj["submitType"] = self.submitTypeVal;
        self
          .getweblogmanagefindpage(JSON.stringify(lisObj))
          .then(data => {
            if (data.statusCode == 200) {
              if (data.data) {
                if (data.data.records) {
                  self.dataList = [];
                  var arrs = data.data.records;
                  arrs.forEach(function (ele, ind) {
                    self.dataList.push({
                      user: ele.user,
                      logId: ele.logId,
                      logImages: ele.logImages,
                      remark: ele.remark,
                      templateId: ele.templateId,
                      templateName: ele.templateName,
                      orgId: ele.orgId,
                      contents: ele.contents,
                      submitTime: ele.submitTime,
                      deleteStatus: ele.deleteStatus,
                      show: false
                    });
                  });
                  self.totalNum = data.data.total * 1;
                } else {
                  self.dataList = [];
                }
              } else {
                self.dataList = [];
              }
            } else if (data.statusCode == "200003") {
              self.$message({
                type: "info",
                message: data.statusMessage
              });
              this.$router.push({
                path: "/login"
              });
            } else {
              self.$message({
                type: "info",
                message: data.statusMessage
              });
            }
          })
          .catch(msg => {
            self.$message({
              type: "info",
              message: "服务器异常"
            });
          });
      },
      // 初始化数据
      listsFun() {
        var self = this;
        self.dataList = [];
        self.tselectAllShow = false;
        var lisObj = {
          memberId: sessionStorage.getItem("memberId"),
          orgId: sessionStorage.getItem("ORGID"),
          submitType: 0,
          pageNo: self.currentPage,
          pageSize: self.pageSizeNum
        };
        self
          .getweblogmanagefindpage(JSON.stringify(lisObj))
          .then(data => {
            if (data.statusCode == 200) {
              if (data.data) {
                self.totalNum = data.data.total * 1;
                if (data.data.records) {
                  var arrs = data.data.records;
                  arrs.forEach(function (ele, ind) {
                    self.dataList.push({
                      user: ele.user,
                      logId: ele.logId,
                      logImages: ele.logImages,
                      remark: ele.remark,
                      templateId: ele.templateId,
                      templateName: ele.templateName,
                      orgId: ele.orgId,
                      contents: ele.contents,
                      submitTime: ele.submitTime,
                      deleteStatus: ele.deleteStatus,
                      show: false
                    });
                  });
                } else {
                  self.dataList = [];
                }
              } else {
                self.dataList = [];
              }
            } else if (data.statusCode == "200003") {
              self.$message({
                type: "info",
                message: data.statusMessage
              });
              this.$router.push({
                path: "/login"
              });
            } else {
              self.$message({
                type: "info",
                message: data.statusMessage
              });
            }
          })
          .catch(msg => {
            self.$message({
              type: "info",
              message: "服务器异常"
            });
          });
      },
      // 列表选择
      dataListClick(index) {
        var self = this;
        this.dataList[index].show = !this.dataList[index].show;
        var selectArr = [];
        this.dataList.forEach(function (ele, ind) {
          if (ele.show == true) {
            selectArr.push(ele);
          }
        });
        if (selectArr.length == self.dataList.length) {
          self.selectAllShow = true;
        } else {
          self.selectAllShow = false;
        }
      },
      // 全选
      selectAllClick() {
        var self = this;
        this.selectAllShow = !this.selectAllShow;
        this.dataList.forEach(function (ele, ind) {
          ele.show = self.selectAllShow;
        });
      },
      //分页-当前页
      handleCurrentChange(val) {
        this.currentPage = val;
        this.searchFindClick();
        // this.listsFun();
      },
      // 分页-每页条数
      handleSizeChange(val) {
        this.pageSizeNum = val;
        this.searchFindClick();
      },
      ...mapActions([
        "getweblogmanagefindpage",
        "getweblogmanagedelete",
        "getweblogsearchexport"
      ])
    },
    filters: {
      timeFun(val) {
        if (val) {
          var standardTime = new Date(val * 1);
          var y, m, d, h, f, s;
          y = standardTime.getFullYear();
          m = standardTime.getMonth() + 1;
          m = m > 9 ? m : "0" + m;
          d = standardTime.getDate();
          d = d > 9 ? d : "0" + d;
          h = standardTime.getHours();
          h = h > 9 ? h : "0" + h;
          f = standardTime.getMinutes();
          f = f > 9 ? f : "0" + f;
          s = standardTime.getSeconds();
          s = s > 9 ? s : "0" + s;
          return y + "-" + m + "-" + d + " " + h + ":" + f + ":" + s;
        } else {
          return "暂无";
        }
      },
      typeFun: function (val) {
        if (val == 1) {
          return "部门";
        } else {
          return "人员";
        }
      },
      strFun: function (val) {
        if (val) {
          return val;
        } else {
          return "无";
        }
      },
      weekFun(val) {
        if (val == 7) {
          return "日";
        } else if (val == 1) {
          return "一";
        } else if (val == 2) {
          return "二";
        } else if (val == 3) {
          return "三";
        } else if (val == 4) {
          return "四";
        } else if (val == 5) {
          return "五";
        } else if (val == 6) {
          return "六";
        }
      }
    },
    watch: {}
  };
</script>
<style scoped>
  .firstLi {
    background-color: #f4f4f6;
  }

  .firstLi,
  .dataLi {
    display: flex;
    width: 100%;
    height: 50px;
    border-bottom: 1px solid #ccc;
  }

  .firstLi>div,
  .dataLi>div {
    width: 25%;
    text-align: center;
    height: 50px;
    line-height: 50px;
    overflow: hidden;
  }

  .lastLi {
    height: 60px;
    display: flex;
    justify-content: space-between;
    margin: 35px 0;
  }

  .signManageSearchRightSearch {
    width: 70px;
    height: 35px;
    cursor: pointer;
    border-radius: 3px;
    background-color: #288df0;
    text-align: center;
    line-height: 35px;
    color: #fff;
    margin-right: 15px;
  }

  .listLoglistMainOPent {
    width: 100%;
    height: 35px;
    display: flex;
    justify-content: flex-end;
  }

  .searchLogListLiRightSelect select {
    width: 250px;
    height: 30px;
    border: 1px solid #38adff;
    border-radius: 3px;
    line-height: 30px;
    padding-left: 7px;
  }

  .searchLogListLiRightSelect {
    width: 250px;
    height: 30px;
    border-radius: 3px;
    line-height: 30px;
  }

  .searchLogListLiRightPeo {
    width: 250px;
    height: 30px;
    border: 1px solid #38adff;
    border-radius: 3px;
    line-height: 30px;
    padding-left: 7px;
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .searchLogListLiRightTime>div:nth-child(2) {
    margin-left: 10px;
  }

  .searchLogListLiRightTime {
    display: flex;
  }

  .searchLogListLiLeft {
    width: 80px;
    text-align: right;
    margin-right: 15px;
  }

  .searchLogListLi {
    display: flex;
    width: 45%;
    height: 35px;
    float: left;
    align-items: center;
    margin-bottom: 10px;
    margin-top: 10px;
  }

  .searchLogList {
    height: 115px;
    width: 100%;
  }

  .listLoglistMain {
    margin-top: 10px;
    min-height: 190px;
    width: 100%;
    border: 1px solid #ccc;
    user-select: none;
  }

  .addInformation {
    overflow: hidden;
    width: 100%;
    background-color: #fff;
    min-height: 500px;
    padding-bottom: 20px;
  }

  .opNoticeTop div {
    color: #303030;
    font-size: 14px;
    padding-top: 24px;
    padding-bottom: 12px;
    margin-left: 44px;
    width: calc(100% - 88px);
    border-bottom: 1px solid #d9d9d9;
  }

  .opNoticeTop {
    width: 100%;
  }

  .opNoticeMain {
    margin-left: 44px;
    width: calc(100% - 88px);
    min-height: 400px;
  }
</style>